<template>
  <div style="min-height: 76vh">
    <el-form @keyup.enter.native="getData()" :inline="true">
      <el-form-item>
        <select-dam
          v-model="searchDamId"
          @select="name => (params.dam_name = name)"
          placeholder="坝区名称"
          clearable
          filterable
          default-first-option
        ></select-dam>
      </el-form-item>
      <el-form-item>
        <select-address
          v-model="params.address_code"
          placeholder="地区选择"
          auto-top
          clearable
          @change="getData()"
        ></select-address>
      </el-form-item>
      <el-form-item>
        <el-button @click="getData()">查询</el-button>
      </el-form-item>
      <el-form-item class="float-right">
        <el-button @click="handleEdit" icon="el-icon-plus" type="primary">新增坝区</el-button>
      </el-form-item>
    </el-form>

    <c-table
      border
      v-loading="loading"
      :stripe="false"
      :columns="tableColumns"
      :data="tableData"
    ></c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="tableCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <c-form-dialog
      ref="form"
      :visible.sync="formVisible"
      :form-items="formItems"
      :form-data="formData"
      :table-name="tableName"
      :table-id="tableId"
      @success="handleEditSuccess"
    ></c-form-dialog>

    <dam-detail-dialog
      :visible.sync="detailVisible"
      :dam-info="detailRow"
      @edit="handleDetailEdit"
    ></dam-detail-dialog>
  </div>
</template>
<script>
import SelectAddress from '@/components/select/SelectAddress'
import SelectDam from '@/gov/components/select/SelectDam'
import DamDetailDialog from '@/gov/views/category/DamDetailDialog'
import { phoneValidator } from '@/common/plugins/validator'
import { arrayFromString } from '@vimi/utils-tool'
export default {
  components: {
    SelectAddress,
    DamDetailDialog,
    SelectDam,
  },
  props: {},
  data() {
    return {
      searchDamId: '',
      params: {
        index: 1,
        size: 20,
        dam_name: '',
        address_code: '',
      },
      loading: false,
      tableCount: 0,
      tableData: [],
      tableColumns: [
        { attrs: { label: '坝区名称', prop: 'dam_name' } },
        { attrs: { label: '地址', prop: 'address' } },
        { attrs: { label: '坝区规模(亩)', prop: 'dam_scale' } },
        { attrs: { label: '主要产业', prop: 'main_ind' } },
        { attrs: { label: '投资规模', prop: 'input_scale' } },
        { attrs: { label: '项目负责人', prop: 'res_person' } },
        { attrs: { label: '联系电话', prop: 'res_person_phone' } },
        { attrs: { label: '负责领导', prop: 'res_leader' } },
        { attrs: { label: '负责乡镇', prop: 'res_leader_address' } },
        {
          attrs: { label: '操作', align: 'center' },
          operations: [
            {
              content: '编辑',
              icon: 'fa fa-edit',
              event: this.handleDetail,
            },
          ],
        },
      ],

      tableName: 'dam_info',
      tableId: '',
      formVisible: false,
      formData: {},
      formItems: [
        {
          tag: 'input',
          itemAttrs: {
            label: '坝区名称',
            rules: [{ required: true, message: '请输入坝区名称', trigger: 'blur' }],
          },
          attrs: { key: 'dam_name', value: '', placeholder: '请输入坝区名称' },
          listeners: {
            change: val => {
              this.setForm(val)
            },
          },
        },
        {
          tag: SelectAddress,
          itemAttrs: {
            label: '坝区地址',
            rules: [{ required: true, message: '请输入坝区地址', trigger: 'change' }],
          },
          attrs: {
            key: 'address_code',
            value: '',
            class: 'form-control-ml',
            bottomLevel: 0,
            autoTop: true,
          },
          listeners: {
            change: v => this.$refs.form.validateField('address_code'),
          },
        },
        {
          tag: 'number',
          itemAttrs: {
            label: '坝区规模',
            rules: [{ required: true, message: '请输入坝区规模', trigger: 'blur' }],
          },
          attrs: { key: 'dam_scale', value: '', placeholder: '请输入坝区规模' },
          tagSlots: [{ name: 'append', slot: '亩' }],
        },
        {
          tag: 'input',
          itemAttrs: {
            label: '主要产业',
            rules: [{ required: true, message: '请输入主要产业', trigger: 'blur' }],
          },
          attrs: { key: 'main_ind', value: '', placeholder: '请输入主要产业' },
        },
        {
          tag: 'number',
          itemAttrs: {
            label: '投资规模',
            rules: [{ required: true, message: '请输入投资规模', trigger: 'blur' }],
          },
          attrs: { key: 'input_scale', value: '', placeholder: '请输入投资规模' },
          tagSlots: [{ name: 'append', slot: '万元' }],
        },
        {
          tag: 'input',
          itemAttrs: {
            label: '项目负责人',
            rules: [{ required: true, message: '请输入项目负责人', trigger: 'blur' }],
          },
          attrs: { key: 'res_person', value: '', placeholder: '请输入项目负责人' },
        },
        {
          tag: 'input',
          itemAttrs: {
            label: '联系电话',
            rules: [
              { required: true, message: '请输入联系电话', trigger: 'blur' },
              { validator: phoneValidator, message: '请输入正确的联系电话', trigger: 'blur' },
            ],
          },
          attrs: { key: 'res_person_phone', value: '', placeholder: '请输入联系电话' },
        },
        {
          tag: 'input',
          itemAttrs: {
            label: '负责领导',
            rules: [{ required: true, message: '请输入负责领导', trigger: 'blur' }],
          },
          attrs: { key: 'res_leader', value: '', placeholder: '请输入负责领导' },
        },
        {
          tag: 'input',
          itemAttrs: {
            label: '负责乡镇',
            rules: [{ required: true, message: '请输入负责乡镇', trigger: 'blur' }],
          },
          attrs: { key: 'res_leader_address', value: '', placeholder: '请输入负责乡镇' },
        },
        {
          tag: 'upload',
          itemAttrs: {
            label: '附件',
          },
          attrs: {
            key: 'attachment',
            class: 'form-control-ml',
            value: '',
            placeholder: '请输入附件',
            accept: '',
            fileName: 0,
            listType: '',
            dir: '/gov/test',
          },
        },
      ],

      detailVisible: false,
      detailRow: {},
    }
  },
  computed: {
    // mapGetters(['user'])
  },
  watch: {},
  created() {
    this.params.address_code = this.$utils.getAddressCode()
    this.getData()
  },
  mounted() {},
  methods: {
    setForm(name) {
      this.$refs.form.setAttrs('attachment', {
        key: 'attachment',
        class: 'form-control-ml',
        placeholder: '请输入附件',
        accept: '',
        fileName: 0,
        listType: '',
        dir: `/gov/${name}`,
      })
    },
    async getData(index = 1) {
      this.params.index = index
      this.loading = true
      const [res] = await this.$utils.promise(
        this.$api.getData(this.$serviceName, 'dam_info_view', this.params)
      )
      this.loading = false

      const data = (res && res.data && res.data.data) || []
      this.tableData = data.map(item => {
        item.files = arrayFromString(item.attachment)
        return item
      })
      this.tableCount = (res && res.data && res.data.totalCount) || 0

      this.refresh()
    },
    handleEdit(row) {
      this.tableId = (row && row.dam_info_id) || ''
      this.formData = row || {}
      this.formVisible = true
      this.$nextTick(() => {
        this.setForm(row.dam_name)
      })
    },
    handleEditSuccess() {
      this.$store.dispatch('getDam', true)
      this.getData()
    },
    handleDetail(row) {
      this.detailRow = row
      this.detailVisible = true
    },
    handleDetailEdit() {
      this.handleEdit(this.detailRow)
    },
    refresh() {
      if (this.tableId) {
        const data = this.tableData.find(item => item.dam_info_id === this.tableId)
        this.detailRow = data || {}
      }
    },
  },
}
</script>
<style lang="scss" scoped></style>
